import { defineComponent } from 'vue';
import { organizeScore, troubleDetail } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import './index.less';
import { ElInput, ElProgress } from 'element-plus';
import ItemTable from './ItemTable';
import CommonTable from '../CommonTable';

export default defineComponent({
  name: 'GroupKpi',
  setup() {
    const data = ref({}) as AnyObject;
    const itemTableRef = ref();
    const commonTableRef = ref();
    const column = [
      { prop: 'date', label: '日期',search:{el:"input",value:"123",props:{placeholder:"请输入s"}} },
      { prop: 'title', label: '标题' },
      { prop: 'content', label: '详情' }
    ] as any;
    organizeScore({}).then((res) => {
      data.value = res.data;
    });

    const viewDetail = () => {
      itemTableRef.value.dialogVisible = true;
    };
    const sumPercentage = (num1:number,num2:number)=>{
      return num1 / num2 * 100;
    }

    return () => (
      <SheltV2 title="组织绩效" more="查看全部" onViewDetail={viewDetail} question="<div><p>【该数据每日02:00更新一次</p><p>组织绩效达成率由4个指标综合计算得出：产品平均合格率、生产事故、客诉降幅、退货率。</p></div>">
        <div class="group_item">
          <p class="title">产品平均合格率：</p>
          <div class="progress_item flex-start">
            <ElProgress
              class="blue_progress"
              stroke-width={15}
              percentage={Number(data.value?.pass_rate_target||0)}
            />
            <div class="block blue"></div>
            <div class="block_text">目标</div>
            <div class="condition">
              {'≥ '}
              {data.value.pass_rate_target}%
            </div>
          </div>
          <div class="progress_item flex-start">
            <ElProgress
              class="orange_progress"
              stroke-width={15}
              percentage={Number(data.value?.pass_rate||0)}
            />
            <div class="block orange"></div>
            <div class="block_text">实际</div>
            <div class="condition">
              {data.value.pass_rate}%
            </div>
          </div>
        </div>
        <div class="group_item">
          <p class="title">生产事故：</p>
          <div class="progress_item flex-start">
            <ElProgress
              class="blue_progress"
              stroke-width={15}
              percentage={(data.value.trouble_target||0+1)/(data.value.trouble||1)*100}
            />
            <div class="block blue"></div>
            <div class="block_text">目标</div>
            <div class="condition">{data.value.trouble_target}</div>
          </div>
          <div class="progress_item flex-start">
            <ElProgress
              class="orange_progress"
              stroke-width={15}
              percentage={100}
            />
            <div class="block orange"></div>
            <div class="block_text">实际</div>
            <div class="condition hover-color" onClick={()=>commonTableRef.value.dialogVisible=true}>{data.value.trouble}</div>
          </div>
        </div>
        <div class="group_item">
          <p class="title">客诉数量：</p>
          <div class="progress_item flex-start">
            <ElProgress
              class="blue_progress"
              stroke-width={15}
              percentage={80}
            />
            <div class="block blue"></div>
            <div class="block_text">目标</div>
            <div class="condition">
              {'≤ '}
              {data.value.complaint_target}
            </div>
          </div>
          <div class="progress_item flex-start">
            <ElProgress
              class="orange_progress"
              stroke-width={15}
              percentage={(data.value.complaint||0)/(data.value.complaint_target*5/4||1)*100}
            />
            <div class="block orange"></div>
            <div class="block_text">实际</div>
            <div class="condition">{data.value.complaint}</div>
          </div>
        </div>
        <div class="group_item">
          <p class="title">退货率：</p>
          <div class="progress_item flex-start">
            <ElProgress
              class="blue_progress"
              stroke-width={15}
              percentage={Number(data.value?.return_goods_rate_target || 0)}
            />
            <div class="block blue"></div>
            <div class="block_text">目标</div>
            <div class="condition">
              {'≤ '}
              {data.value.return_goods_rate_target}%
            </div>
          </div>
          <div class="progress_item flex-start">
            <ElProgress
              class="orange_progress"
              stroke-width={15}
              percentage={Number(data.value?.return_goods_rate || 0)}
            />
            <div class="block orange"></div>
            <div class="block_text">实际</div>
            <div class="condition">{data.value.return_goods_rate}%</div>
          </div>
        </div>
        <ItemTable ref={itemTableRef} data={data.value} />
        <CommonTable title="生产事故" ref={commonTableRef} requestApi={troubleDetail} column={column} />
      </SheltV2>
    );
  }
});
